<template>
  <div class="main">
    <div class="title">
      <a-divider type="horizontal"><b>测试demo</b></a-divider>
    </div>
    <div class="login">
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item>
          <a-input
            v-decorator="[
              'username',
              {
                rules: [{ required: true, message: '请输入用户名!' }]
              }
            ]"
            size="large"
          >
            <a-icon slot="prefix" type="user" class="prefixIcon" />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input
            v-decorator="[
              'password',
              {
                rules: [{ required: true, message: '请输入密码!' }]
              }
            ]"
            size="large"
            type="password"
          >
            <a-icon slot="prefix" type="lock" class="prefixIcon" />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button
            size="large"
            class="submit"
            type="primary"
            htmlType="submit"
            :loading="loginLoading"
          >
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import { httpPost, OA_LOGIN } from "../../api/api";
import { mapActions, mapState } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      form: this.$form.createForm(this)
    };
  },
  computed: {
    ...mapState({
      loginLoading: state => state.loading[OA_LOGIN]
    })
  },
  methods: {
    ...mapActions("userStore", ["setUserInfo"]), // 第一个参数指定命名空间
    handleSubmit: function(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (err) return;
        httpPost(OA_LOGIN, values).then(res => {
          //设置cookie
          this.setCookie(res);
          if (values.username === res.username) {
            this.$router.push("/home");
          } else {
            this.$message.error("用户名不存在！",1);
          }
        });
      });
    },
    setCookie(data) {
      this.$cookies.set("userInfo", JSON.stringify(data));
    }
  }
};
</script>

<style scoped lang="less">
@import "~ant-design-vue/lib/style/themes/default.less";

.main {
  padding-top: 20px;
  width: 388px;
  margin: 0 auto;
  text-align: left;
  @media screen and (max-width: @screen-sm) {
    width: 95%;
  }
  .icon {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.2);
    font-size: 24px;
    vertical-align: middle;
    cursor: pointer;
    transition: color 0.3s;

    &:hover {
      color: @primary-color;
    }
  }

  .other {
    margin-top: 24px;
    line-height: 22px;
    text-align: left;

    .register {
      float: right;
    }
  }
  .login {
    /deep/ .ant-tabs .ant-tabs-bar {
      margin-bottom: 24px;
      text-align: center;
      border-bottom: 0;
    }

    /deep/ .ant-form-item {
      margin: 0 2px 24px;
    }

    .getCaptcha {
      display: block;
      width: 100%;
    }

    .icon {
      margin-left: 16px;
      color: rgba(0, 0, 0, 0.2);
      font-size: 24px;
      vertical-align: middle;
      cursor: pointer;
      transition: color 0.3s;
      &:hover {
        color: @primary-color;
      }
    }

    .other {
      margin-top: 24px;
      line-height: 22px;
      text-align: left;
      .register {
        float: right;
      }
    }

    .prefixIcon {
      color: @disabled-color;
      font-size: @font-size-base;
    }

    .submit {
      width: 100%;
      margin-top: 24px;
    }
  }
}
</style>
